<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>延时和结束</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
        }

        button {
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div>
        <button>finish</button>
        <button>stop(false,false)</button>
        <button>stop(false,true)</button>
        <button>stop(true,false)</button>
        <button>stop(true,true)</button>
    </div>

    <div class="box"></div>

    <script src="../lib/jquery/jquery.min.js"></script>
    <script>
        var $box = $(".box");

        // jQ 会将同一个元素的多个 animate 放到一个队列中，按顺序执行
        $box.click(function () {
            $box.animate({
                height: 400,
                // width: "toggle",
                borderRadius: "50%"
            }, 2000)

            $box.delay("2000");

            $box.animate({
                width: "400px",
                // height: "hide"
            }, 3000)

            $box.animate({
                left: 400,
                // height: "show"
            }, 2000)

            // show hide toggle
        })

        $("button:eq(0)").click(function (){
            // 停止当前动画，并将元素的样式设置为所有动画的终点样式的叠加态 
            $box.finish();
        })

        $("button:eq(1)").click(function (){
            // 停止当前动画，停止当前动画，并执行下一个阶段 
            $box.stop(false, false);
        })
        
        $("button:eq(2)").click(function (){
            // 快进效果，将当前动画快进到终点值，执行下一个动画 
            $box.stop(false, true);
        })
        
        $("button:eq(3)").click(function (){
            // 停止在当前位置，取消后面所有动画 
            $box.stop(true, false);
        })
        
        $("button:eq(4)").click(function (){
            // 快进到当前动画的终点位置，取消后面所有动画 
            $box.stop(true, true);
        })
    </script>
</body>

</html>